<%@ page import="yhp.service.impl.UserServiceImpl" %><%--
  Created by IntelliJ IDEA.
  User: SX
  Date: 2021/1/10
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>微博点赞</title>
    <!-- CSS样式，取消超链接下划线 -->
    <style type="text/css">
        div {text-decoration: none;color: #000000
        }
    </style>
</head>
<body>
<%UserServiceImpl dao = new UserServiceImpl();
    request.setAttribute("sum",dao.sum());%>
<h1>输入用户名和密码实现点赞功能</h1><br>
用户名<input type="text" name="userName" id="uname"><br>
密码<input type="password" name="userPassword" id="upass"><br>
<div title="赞" href="/praise" >
    <img src="images/black.jpg" width="20px" id="image">
    <span id="number" >${sum}</span>
</div>
</body>

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    //鼠标移入变色
    $(function (){
        $("div").mouseover(function (){
            $("#image").attr("src","images/red.png");
            $("#number").css("color","red",);
        })
    })
    //鼠标移出变回原色
    $(function (){
        $("div").mouseout(function (){
            $("#image").attr("src","images/black.png");
            $("#number").css("color","black");
        })
    })
    //点击图标实现点赞功能
    $(function (){
        $("div").click(function (){
            //1.取值
            var username = $("#uname").val();
            var userPassword = $("#upass").val();
            $.post("/praise","userName="+username+"&userPassword="+userPassword,function (result){
                $("#number").html(result);
            })
        })
    })
</script>
</html>
